import { Breadcrumb, Button, Layout, List, Menu, message, PageHeader, Space, Upload } from "antd";
import Sider from "antd/lib/layout/Sider";
import React, { useState } from "react";
import "./index.less";
import { LaptopOutlined, NotificationOutlined, UserOutlined, ArrowLeftOutlined, FolderFilled, DeleteOutlined, PictureOutlined, FileTextOutlined, PlaySquareOutlined, CustomerServiceOutlined, EllipsisOutlined, FolderOutlined, AppstoreOutlined, UnorderedListOutlined, UploadOutlined } from '@ant-design/icons';
import UserHeader from "../../moudules/userheader";


const Header = Layout.Header;
const Content = Layout.Content;
const Footer = Layout.Footer;
const SubMenu = Menu.SubMenu;


function Index() {

    return (
        <>
            <Layout style={{ minHeight: "100vh" }}>
                <UserHeader />
                <Content style={{ padding: '0 50px' }}>
                    <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
                        <Sider className="site-layout-background" width={200}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%' }}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="我的文件">
                                    <Menu.Item key="0" icon={<FolderOutlined />}>全部</Menu.Item>
                                    <Menu.Item key="1" icon={<PictureOutlined />}>图片</Menu.Item>
                                    <Menu.Item key="2" icon={<FileTextOutlined />}>文档</Menu.Item>
                                    <Menu.Item key="3" icon={<PlaySquareOutlined />}>视频</Menu.Item>
                                    <Menu.Item key="4" icon={<CustomerServiceOutlined />}>音频</Menu.Item>
                                    <Menu.Item key="5" icon={<EllipsisOutlined />}>其他</Menu.Item>
                                </SubMenu>
                                <Menu.Item icon={<DeleteOutlined />}>回收站</Menu.Item>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="快捷访问">

                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Content
                            style={{
                                margin: '0 24px 0 24px',
                                minHeight: 280,
                                background: "#fff",
                                paddingBottom: 20
                            }}
                        >
                            <FileContent />
                        </Content>
                        <Sider style={{ background: "#fff", padding: "12px 24px" }} width={250}>
                            文件描述
                        </Sider>
                    </Layout>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </>
    )
}

function FileContent() {
    const [isList, setList] = useState(false);
    const toggleList = () => {
        setList((state) => {
            return !state;
        })
    }
    const routes = [
        {
            path: 'index',
            breadcrumbName: '一级目录',
        },
        {
            path: 'first',
            breadcrumbName: '二级目录',
        },
        {
            path: 'second',
            breadcrumbName: '三级目录',
        },
    ];
    return (
        <>
            <PageHeader
                className="site-page-header"
                breadcrumb={{ routes }}
            />
            <div
                style={{
                    padding: "0 24px"
                }}
            >
                <div
                    style={{
                        display: "flex",
                        margin: "12px 0",
                        justifyContent: "space-between"
                    }}
                >
                    <div>
                        <UploadFile />
                    </div>
                    <div className="act-btns">
                        <Button type="link" onClick={toggleList}>
                            {isList ? <AppstoreOutlined style={{ fontSize: 20 }} /> : <UnorderedListOutlined style={{ fontSize: 20 }} />}
                        </Button>
                    </div>
                </div>
                {
                    isList
                        ? <List
                            dataSource={new Array(10).fill(0)}
                            renderItem={item => (
                                <FileFolderListItem />
                            )}
                        />
                        : <Space size={[24, 16]} wrap>
                            {filesSquare()}
                        </Space>
                }
            </div>
        </>
    )
}

function filesSquare() {
    return new Array(10).fill(0).map((_, index) => {
        return <FileFolderSquare key={index} />
    });
}

function filesList() {
    return new Array(30).fill(0).map((_, index) => {
        return <FileFolderListItem key={index} />
    });
}

function FileFolderSquare() {
    return (
        <div className="file-folder-box" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <FolderFilled style={{ fontSize: 60, color: "#ffdf2c" }} />
            <div style={{ textAlign: "center" }}>文件夹</div>
        </div>
    )
}

function FileFolderListItem() {
    return (
        <div className="file-folder-list" style={{ display: "flex", alignItems: "center" }}>
            <FolderFilled className="icon" style={{ fontSize: 20, color: "#ffdf2c" }} />
            <div style={{ textAlign: "center" }}>文件夹</div>
        </div>
    )
}



function UploadFile() {
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info:any) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    return (
        <Upload {...props}>
            <Button type="primary" icon={<UploadOutlined />}>上传文件</Button>
        </Upload>
    )
}


export default Index